<!doctype html>



  


<html class="theme-next pisces use-motion">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PBHRK7');</script>
<!-- End Google Tag Manager -->
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端 知识 面试," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="前言  不得不说现在无论在前端和后端领域的技术迭代十分迅速，比如前段时间SpringBoot2.0的更新采用了Http2.0技术；这些基础协议的更新往往带来了实质的更新。一些名词:”HTTP 管线化”、”会话跟踪”、”跨站攻击”等等，那些你耳熟能详，但是无法细究的东西决定了这个总结诞生，或许文章会很长，但是也请静下心来阅读，而这个文章自己打算一段时间来持续更新。 基础知识HTTP介绍基础概念  H">
<meta name="keywords" content="前端 知识 面试">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试《第三篇》HTTPS和HTTP2.0详解">
<meta property="og:url" content="http://wurh.github.io/2019/03/29/20190331/index.html">
<meta property="og:site_name" content="华Ing&#39;s blog">
<meta property="og:description" content="前言  不得不说现在无论在前端和后端领域的技术迭代十分迅速，比如前段时间SpringBoot2.0的更新采用了Http2.0技术；这些基础协议的更新往往带来了实质的更新。一些名词:”HTTP 管线化”、”会话跟踪”、”跨站攻击”等等，那些你耳熟能详，但是无法细究的东西决定了这个总结诞生，或许文章会很长，但是也请静下心来阅读，而这个文章自己打算一段时间来持续更新。 基础知识HTTP介绍基础概念  H">
<meta property="og:locale" content="en">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http1.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http2.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http3.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http4.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http5.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http6.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http7.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http8.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http9.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http10.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http11.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http12.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http13.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http14.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http15.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http16.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http17.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http18.jpg">
<meta property="og:image" content="https://wurh.github.io/images/blogs/20190331/http19.jpg">
<meta property="og:updated_time" content="2019-07-12T06:10:38.187Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试《第三篇》HTTPS和HTTP2.0详解">
<meta name="twitter:description" content="前言  不得不说现在无论在前端和后端领域的技术迭代十分迅速，比如前段时间SpringBoot2.0的更新采用了Http2.0技术；这些基础协议的更新往往带来了实质的更新。一些名词:”HTTP 管线化”、”会话跟踪”、”跨站攻击”等等，那些你耳熟能详，但是无法细究的东西决定了这个总结诞生，或许文章会很长，但是也请静下心来阅读，而这个文章自己打算一段时间来持续更新。 基础知识HTTP介绍基础概念  H">
<meta name="twitter:image" content="https://wurh.github.io/images/blogs/20190331/http1.jpg">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    }
  };
</script>




  <link rel="canonical" href="http://wurh.github.io/2019/03/29/20190331/"/>


  <title> 前端面试《第三篇》HTTPS和HTTP2.0详解 | 华Ing's blog </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="en">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBHRK7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  










  
  
    
  

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-69412379-1', 'auto');
  ga('send', 'pageview');

</script>

  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b3ddfb8655d8b77429e04c7a4d5bcbc1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>


  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">华Ing's blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">harder and harder</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            Tags
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                前端面试《第三篇》HTTPS和HTTP2.0详解
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2019-03-29T09:20:00+08:00" content="2019-03-29">
              2019-03-29
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/前端面试/" itemprop="url" rel="index">
                    <span itemprop="name">前端面试</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/2019/03/29/20190331/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2019/03/29/20190331/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h4 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h4><p>  不得不说现在无论在前端和后端领域的技术迭代十分迅速，比如前段时间SpringBoot2.0的更新采用了Http2.0技术；这些基础协议的更新往往带来了实质的更新。一些名词:”HTTP 管线化”、”会话跟踪”、”跨站攻击”等等，那些你耳熟能详，但是无法细究的东西决定了这个总结诞生，或许文章会很长，但是也请静下心来阅读，而这个文章自己打算一段时间来持续更新。</p>
<h3 id="基础知识"><a href="#基础知识" class="headerlink" title="基础知识"></a>基础知识</h3><h4 id="HTTP介绍"><a href="#HTTP介绍" class="headerlink" title="HTTP介绍"></a>HTTP介绍</h4><h5 id="基础概念"><a href="#基础概念" class="headerlink" title="基础概念"></a>基础概念</h5><p>  HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。<br>它的发展是万维网协会（World Wide Web Consortium）和Internet工作小组IETF（Internet Engineering Task Force）合作的结果。<br>它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。</p>
<p>版本</p>
<p>最常用的是HTTP1.0/1.1<br>最新版本是HTTP2.0，与1.0/1.1相比，有了更高的性能、安全性和灵活性<br>以前的版本0.9等</p>
<p>HTTP协议<br>URL与资源<br>在TCP/IP模型中，所有的网络连接都要使用方案，方案定义使用什么协议，比如http、ftp、telnet<br>一个标准的网络请求包括:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;scheme&gt;:<span class="comment">//&lt;user&gt;:&lt;password&gt;@&lt;host&gt;:&lt;port&gt;/&lt;path&gt;;&lt;params&gt;?&lt;query&gt;#&lt;frag&gt;</span></span><br></pre></td></tr></table></figure>
<p>但在实际使用过程中，对于不同协议可以缺少某些信息，比如</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ftp:<span class="comment">//192.168.169.121</span></span><br><span class="line">http:<span class="comment">//www.baidu.com/index.html</span></span><br></pre></td></tr></table></figure>
<h4 id="URI、URL和URN"><a href="#URI、URL和URN" class="headerlink" title="URI、URL和URN"></a>URI、URL和URN</h4><p>URI:统一资源标识符，包括URL和URN<br>URL:统一资源标识符，比如<a href="http://www.baidu.com/index.html就是一个URL" target="_blank" rel="noopener">http://www.baidu.com/index.html就是一个URL</a><br>URN:统一资源名，它是无关物理位置的资源名定义，例子urn:ieft:rfc:2141</p>
<p>目前URN处于试验阶段，实际应用还很困难，在没有特别说明时，一般我们说的URI就代表URL</p>
<h4 id="媒体类型"><a href="#媒体类型" class="headerlink" title="媒体类型"></a>媒体类型</h4><p>在HTTP中，不管是word文件、js文件或者图片都是资源，通可以通过URL进行请求，但每种不同的文件都要进行区分，以便服务端和客户端进行正确处理，比如播放声音、显示文字。</p>
<p>因此，HTTP仔细地给每种要通过http请求响应传输的对象都打上名为MIME类型的数据格式标签。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">MIME: Multipurpose Internet Mail Extension 多用途因特网邮件扩展</span><br></pre></td></tr></table></figure>
<p>最开始是为了解决电子邮件系统之间的问题，后来用于定义更多类型的多谋体内容。常见的MIME：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">html：text/html</span><br><span class="line">Ascii: text/plain</span><br><span class="line">Json:text/json</span><br><span class="line">Jpg:image/jpeg</span><br><span class="line">Gif:image/gif</span><br><span class="line">Ppt: application/vnd.ms-powerpoint</span><br><span class="line">Quicktime:video/quicktime</span><br></pre></td></tr></table></figure>
<h3 id="协议介绍"><a href="#协议介绍" class="headerlink" title="协议介绍"></a>协议介绍</h3><h4 id="协议栈"><a href="#协议栈" class="headerlink" title="协议栈"></a>协议栈</h4><p>HTTP在TCP/IP协议栈中的位置</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http1.jpg" alt=""></p>
<p>HTTP是基于TCP/IP的应用，因此HTTP无须关心网络寻址、数据传输和拓扑结构</p>
<h4 id="协议工作流程"><a href="#协议工作流程" class="headerlink" title="协议工作流程"></a>协议工作流程</h4><p>协议图<br><img src="https://wurh.github.io/images/blogs/20190331/http2.jpg" alt=""></p>
<p>在HTTP1.0/1.1中，HTTP采用请求响应模型来处理HTTP事务 HTTP事务有一条请求命令和一个响应结果组成，它们通过HTTP报文进行数据传输<br>注意：请求是从客户端发往服务端，而响应是从服务端发回客户端<br>HTTP的工作过程</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http3.jpg" alt=""></p>
<p>HTTP的工作过程</p>
<p>（1）客户端连接到Web服务器<br>（2）发送HTTP请求<br>（3）服务器接受请求并返回HTTP响应<br>（4）释放连接TCP连接<br>（5）客户端浏览器解析HTML内容</p>
<p>HTTP报文<br>报文</p>
<p>HTTP1.0/1.1报文由三部分组成：起始行、首部以及可选、包含数据的主体</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http4.png" alt=""></p>
<p>其中起始行和首部是由行分隔的ASCII文本<br>主体是一个可选的数据块，主体中可以包含文本也可以包含二进制数据，也可以为空，与首部通过空一行进行区分<br>请求报文的格式：</p>
<p><method> <request-url> <version></version></request-url></method></p>
<headers>

<p><entity-body></entity-body></p>
<p>响应报文的格式：</p>
<p><version> <status> <reason-phrase></reason-phrase></status></version></p>
<headers>

<p><entity-body></entity-body></p>
<p>具体例子：</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http5.jpg" alt=""></p>
<p>浏览器报文</p>
<p>注：部分文章也将HTTP请求报文分为两部分请求头和请求体，请求头的第一行为请求行。<br>首部字段</p>
<p>HTTP首部字段向请求和响应报文中添加了一些附加信息，是一系列 key-value的列表,比如Content-Type:image/jpeg 表示类型是jpeg图片</p>
<p>首部的分类包括</p>
<p>通用首部：在请求和响应中都出现的信息<br>请求首部：只在请求报文中出现的信息<br>响应首部：只在响应报文中出现的信息</p>
<p>实体首部：描述主题的长度、内容等的信息<br>扩展首部：在HTTP规范中没有定义的其他信息<br>实体<br>HTTP实体是HTTP报文的负荷，是HTTP要传输的数据内容。<br>方法<br>HTTP基本的方法包括：GET/POST/HEAD/PUT/TRACE/OPTIONS，用来告诉服务端要做什么操作<br>GET<br>GET是最常用的方法，通常用于请求服务器发送某个资源</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http6.jpg" alt=""></p>
<p>GET</p>
<p>POST<br>POST是常用的方法之一，用于向服务端提交数据，有主体</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http7.jpg" alt=""></p>
<p>POST</p>
<p>HEAD<br>与GET类似，但在响应中只有首部，不返回具体数据，可以用来查看资源是否存在<br>PUT/TRACE/OPTIONS/DELETE</p>
<p>PUT:用于向服务端写入文档<br>TRACE:用于跟踪某个请求<br>OPTIONS:用于查询服务端支持的方法<br>DELETE:用于删除服务端某个资源</p>
<h4 id="其他扩展方法"><a href="#其他扩展方法" class="headerlink" title="其他扩展方法"></a>其他扩展方法</h4><p>HTTP在设计之初就被设计成可扩展的，这样就可以适应新的特性。<br>扩展方法是在HTTP规范中没有定义的方法，它们有特别的用处，但需要服务端进行实现：<br>LOCK：锁定某个资源<br>COPY：拷贝某个资源<br>MOVE：移动某个资源</p>
<h4 id="状态码"><a href="#状态码" class="headerlink" title="状态码"></a>状态码</h4><p>状态码是响应报文中对请求所做事情的处理结果，以方便客户端处理响应数据</p>
<p>状态码分为五大类：</p>
<p>信息性状态码：100~199<br>成功状态码：200~299<br>重定向状态码：300~399<br>客户端错误状态码：400~499</p>
<p>服务端错误状态码：500~599<br>常见的状态码有如下几种</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- <span class="number">200</span> OK 客户端请求成功   </span><br><span class="line">- <span class="number">301</span> Moved Permanently 请求永久重定向    </span><br><span class="line">- <span class="number">302</span> Moved Temporarily 请求临时重定向    </span><br><span class="line">- <span class="number">304</span> Not Modified 文件未修改，可以直接使用缓存的文件。  </span><br><span class="line">- <span class="number">400</span> Bad Request 由于客户端请求有语法错误，不能被服务器所理解。  </span><br><span class="line">- <span class="number">401</span> Unauthorized 请求未经授权。这个状态代码必须和WWW-Authenticate报头域一起使用 </span><br><span class="line">- <span class="number">403</span> Forbidden 服务器收到请求，但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的原因    </span><br><span class="line">- <span class="number">404</span> Not Found 请求的资源不存在，例如，输入了错误的URL  </span><br><span class="line">- <span class="number">500</span> Internal Server <span class="built_in">Error</span> 服务器发生不可预期的错误，导致无法完成客户端的请求。 </span><br><span class="line">- <span class="number">503</span> Service Unavailable 服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常。</span><br></pre></td></tr></table></figure>
<h3 id="Https的基础知识"><a href="#Https的基础知识" class="headerlink" title="Https的基础知识"></a>Https的基础知识</h3><p>超文本传输安全协议（英语：Hypertext Transfer Protocol Secure，缩写：HTTPS，常称为HTTP over TLS，HTTP over SSL或HTTP Secure）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http8.jpg" alt=""></p>
<p>Http与Https</p>
<p>SSL（Secure Socket Layer，安全套接字层）：1994年为 Netscape 所研发，SSL 协议位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。</p>
<p>TLS（Transport Layer Security，传输层安全）：其前身是 SSL，它最初的几个版本（SSL 1.0、SSL 2.0、SSL 3.0）由网景公司开发，1999年从 3.1 开始被 IETF 标准化并改名，发展至今已经有 TLS 1.0、TLS 1.1、TLS 1.2 三个版本。SSL3.0和TLS1.0由于存在安全漏洞，已经很少被使用到。TLS 1.3 改动会比较大，目前还在草案阶段，目前使用最广泛的是TLS 1.1、TLS 1.2。</p>
<h3 id="Https"><a href="#Https" class="headerlink" title="Https"></a>Https</h3><h4 id="HTTP-传输面临的巨大的安全问题如下："><a href="#HTTP-传输面临的巨大的安全问题如下：" class="headerlink" title="HTTP 传输面临的巨大的安全问题如下："></a>HTTP 传输面临的巨大的安全问题如下：</h4><p>隐私泄露<br>页面劫持<br>劫持路径及分类</p>
<p>HTTP 向 HTTPS 演化的过程<br>第一步：为了防止上述现象的发生，人们想到一个办法：对传输的信息加密（即使黑客截获，也无法破解）</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http9.jpg" alt=""></p>
<p>如上图所示，此种方式属于对称加密，双方拥有相同的密钥，信息得到安全传输，但此种方式的缺点是：</p>
<p>不同的客户端、服务器数量庞大，所以双方都需要维护大量的密钥，维护成本很高<br>因每个客户端、服务器的安全级别不同，密钥极易泄露<br>第二步：既然使用对称加密时，密钥维护这么繁琐，那我们就用非对称加密试试</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http10.jpg" alt=""></p>
<p>如上图所示，客户端用公钥对请求内容加密，服务器使用私钥对内容解密，反之亦然，但上述过程也存在缺点：</p>
<p>公钥是公开的（也就是黑客也会有公钥），所以第 ④ 步私钥加密的信息，如果被黑客截获，其可以使用公钥进行解密，获取其中的内容<br>第三步：非对称加密既然也有缺陷，那我们就将对称加密，非对称加密两者结合起来，取其精华、去其糟粕，发挥两者的各自的优势</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http11.png" alt=""></p>
<p>如上图所示<br>第 ③ 步时，客户端说：（咱们后续回话采用对称加密吧，这是对称加密的算法和对称密钥）这段话用公钥进行加密，然后传给服务器<br>服务器收到信息后，用私钥解密，提取出对称加密算法和对称密钥后，服务器说：（好的）对称密钥加密<br>后续两者之间信息的传输就可以使用对称加密的方式了</p>
<p>遇到的问题：</p>
<p>客户端如何获得公钥<br>如何确认服务器是真实的而不是黑客</p>
<p>第四步：获取公钥与确认服务器身份</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http12.png" alt=""></p>
<p>获取公钥<br>提供一个下载公钥的地址，回话前让客户端去下载。（缺点：下载地址有可能是假的；客户端每次在回话前都先去下载公钥也很麻烦）<br>回话开始时，服务器把公钥发给客户端（缺点：黑客冒充服务器，发送给客户端假的公钥）</p>
<p>那有木有一种方式既可以安全的获取公钥，又能防止黑客冒充呢？   那就需要用到终极武器了：SSL 证书（申购)</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http13.png" alt=""></p>
<p>如上图所示，在第 ② 步时服务器发送了一个SSL证书给客户端，SSL 证书中包含的具体内容有：</p>
<p>证书的发布机构CA<br>证书的有效期<br>公钥<br>证书所有者<br>签名<br>………</p>
<p>3.客户端在接受到服务端发来的SSL证书时，会对证书的真伪进行校验，以浏览器为例说明如下：</p>
<p>首先浏览器读取证书中的证书所有者、有效期等信息进行一一校验<br>浏览器开始查找操作系统中已内置的受信任的证书发布机构CA，与服务器发来的证书中的颁发者CA比对，用于校验证书是否为合法机构颁发<br>如果找不到，浏览器就会报错，说明服务器发来的证书是不可信任的。<br>如果找到，那么浏览器就会从操作系统中取出  颁发者CA  的公钥，然后对服务器发来的证书里面的签名进行解密<br>浏览器使用相同的hash算法计算出服务器发来的证书的hash值，将这个计算的hash值与证书中签名做对比<br>对比结果一致，则证明服务器发来的证书合法，没有被冒充<br>此时浏览器就可以读取证书中的公钥，用于后续加密了</p>
<p>4.所以通过发送SSL证书的形式，既解决了公钥获取问题，又解决了黑客冒充问题，一箭双雕，HTTPS加密过程也就此形成</p>
<h2 id="Htttp2-0"><a href="#Htttp2-0" class="headerlink" title="Htttp2.0"></a>Htttp2.0</h2><p>HTTP/2 （原名HTTP/2.0）即超文本传输协议 2.0，是下一代HTTP协议。是由互联网工程任务组（IETF）的Hypertext Transfer Protocol Bis (httpbis)工作小组进行开发。是自1999年http1.1发布后的首个更新。HTTP 2.0在2013年8月进行首次合作共事性测试。在开放互联网上HTTP 2.0将只用于 https:// 网址，而  http:// 网址将继续使用HTTP/1，目的是在开放互联网上增加使用加密技术，以提供强有力的保护去遏制主动攻击。DANE RFC6698允许域名管理员不通过第三方CA自行发行证书。</p>
<p>Http2.0的优势；</p>
<p>提升web的性能，在与 HTTP/1.1 完全语义兼容的基础上，进一步减少了网络延迟</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http14.jpg" alt=""></p>
<h5 id="web性能对比"><a href="#web性能对比" class="headerlink" title="web性能对比"></a>web性能对比</h5><p>HTTP/2: the Future of the Internet 这是 Akamai 公司建立的一个官方的演示，用以说明 HTTP/2 相比于之前的 HTTP/1.1 在性能上的大幅度提升。 同时请求 379 张图片，从Load time 的对比可以看出 HTTP/2 在速度上的优势。</p>
<h5 id="延时问题"><a href="#延时问题" class="headerlink" title="延时问题"></a>延时问题</h5><p>使用chrome的开发工具的操作时，可以明显发现Http1.0的延时问题比较。</p>
<h5 id="多路复用-Multiplexing"><a href="#多路复用-Multiplexing" class="headerlink" title="多路复用 (Multiplexing)"></a>多路复用 (Multiplexing)</h5><p>多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。</p>
<p>众所周知 ，在 HTTP/1.1 协议中 「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http15.jpg" alt=""></p>
<p>HTTP/2 的多路复用(Multiplexing) 则允许同时通过单一的 HTTP/2 连接发起多重的请求-响应;因此 HTTP/2 可以很容易的去实现多流并行而不用依赖建立多个 TCP 连接，HTTP/2 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上;往往有效的解决了统一域名请求限制阻塞问题。</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http16.jpg" alt=""></p>
<p><strong>二进制分帧 </strong><br>在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame）,并对它们采用二进制格式的编码 ，其中 HTTP1.x 的首部信息会被封装到 HEADER frame，而相应的 Request Body 则封装到 DATA frame 里面。<br>++HTTP/2 通信都在一个连接上完成，这个连接可以承载任意数量的双向数据流++。<br>在过去， HTTP 性能优化的关键并不在于高带宽，而是低延迟。TCP 连接会随着时间进行自我「调谐」，起初会限制连接的最大速度，如果数据成功传输，会随着时间的推移提高传输的速度。这种调谐则被称为 TCP 慢启动。由于这种原因，让原本就具有突发性和短时性的 HTTP 连接变的十分低效。</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http17.jpg" alt=""></p>
<p>总结：</p>
<p>单连接多资源的方式，减少服务端的链接压力,内存占用更少,连接吞吐量更大<br>由于 TCP 连接的减少而使网络拥塞状况得以改善，同时慢启动时间的减少,使拥塞和丢包恢复速度更快</p>
<p>首部压缩（Header Compression）<br>HTTP/1.1并不支持 HTTP 首部压缩，为此 SPDY 和 HTTP/2 应运而生， SPDY 使用的是通用的DEFLATE 算法，而 HTTP/2 则使用了专门为首部压缩而设计的 HPACK 算法。</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http18.jpg" alt=""></p>
<p>服务端推送<br>服务端推送是一种在客户端请求之前发送数据的机制。在 HTTP/2 中，服务器可以对客户端的一个请求发送多个响应。Server Push 让 HTTP1.x 时代使用内嵌资源的优化手段变得没有意义；如果一个请求是由你的主页发起的，服务器很可能会响应主页内容、logo 以及样式表，因为它知道客户端会用到这些东西。这相当于在一个 HTML 文档内集合了所有的资源，不过与之相比，服务器推送还有一个很大的优势：可以缓存！也让在遵循同源的情况下，不同页面之间可以共享缓存资源成为可能。</p>
<p><img src="https://wurh.github.io/images/blogs/20190331/http19.jpg" alt=""></p>
</headers></headers>
      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="https://wurh.github.io/images/others/weixinshou.png" alt="华Ing WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="https://wurh.github.io/images/others/alifu.png" alt="华Ing Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端-知识-面试/" rel="tag">#前端 知识 面试</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/03/29/20190330/" rel="next" title="前端面试题《第二篇》 Service workder">
                <i class="fa fa-chevron-left"></i> 前端面试题《第二篇》 Service workder
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/03/29/20190401/" rel="prev" title="前端面试题《第四篇》 前端安全">
                前端面试题《第四篇》 前端安全 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2019/03/29/20190331/"
           data-title="前端面试《第三篇》HTTPS和HTTP2.0详解" data-url="http://wurh.github.io/2019/03/29/20190331/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            Overview
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://wurh.github.io/images/avatar/logo.jpg?123456"
               alt="华Ing" />
          <p class="site-author-name" itemprop="name">华Ing</p>
          <p class="site-description motion-element" itemprop="description">harder and harder</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">56</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wurh" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1674582564/profile?topnav=1&wvr=6" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/wu-rong-hua-56" target="_blank" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              Links
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://fsiaonma.github.io/" title="sam博客" target="_blank">sam博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://shenjoel.github.io/" title="joel博客" target="_blank">joel博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://firewood1122.github.io" title="firewood博客" target="_blank">firewood博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://reqianduan.com" title="热前端" target="_blank">热前端</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://opentutorial.info/" title="黄超博客" target="_blank">黄超博客</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#基础知识"><span class="nav-number"></span> <span class="nav-text">基础知识</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTTP介绍"><span class="nav-number">1.</span> <span class="nav-text">HTTP介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#基础概念"><span class="nav-number">1.1.</span> <span class="nav-text">基础概念</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#URI、URL和URN"><span class="nav-number">2.</span> <span class="nav-text">URI、URL和URN</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#媒体类型"><span class="nav-number">3.</span> <span class="nav-text">媒体类型</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#协议介绍"><span class="nav-number"></span> <span class="nav-text">协议介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#协议栈"><span class="nav-number">1.</span> <span class="nav-text">协议栈</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#协议工作流程"><span class="nav-number">2.</span> <span class="nav-text">协议工作流程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#其他扩展方法"><span class="nav-number">3.</span> <span class="nav-text">其他扩展方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#状态码"><span class="nav-number">4.</span> <span class="nav-text">状态码</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Https的基础知识"><span class="nav-number"></span> <span class="nav-text">Https的基础知识</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Https"><span class="nav-number"></span> <span class="nav-text">Https</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTTP-传输面临的巨大的安全问题如下："><span class="nav-number">1.</span> <span class="nav-text">HTTP 传输面临的巨大的安全问题如下：</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Htttp2-0"><span class="nav-number"></span> <span class="nav-text">Htttp2.0</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#web性能对比"><span class="nav-number">0.1.</span> <span class="nav-text">web性能对比</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#延时问题"><span class="nav-number">0.2.</span> <span class="nav-text">延时问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#多路复用-Multiplexing"><span class="nav-number">0.3.</span> <span class="nav-text">多路复用 (Multiplexing)</span></a></li></ol></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2013 - 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">华Ing</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.2"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"wurh"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  






  
  

  

  

  

  


</body>
</html>
